import React from 'react'
import './trends.less'
import {HashRouter,Link} from 'react-router-dom'
import axios from 'axios'
import {base} from '../../../utils/paths'
import see from '../../../img/see.png'
import ReactPlaceholder from 'react-placeholder';
import "react-placeholder/lib/reactPlaceholder.css";
let img:any = see;
const useEffect =  React.useEffect;
const useState = React.useState;
function Trends(props) {
    let [uinfo,setUinfo]:[any,Function] = useState([]);
    let [baseurl,setbaseurl] = useState('')
    let [tot,settot] = useState(0);
    let [loading,setloading] = useState(false);
    let [kloading,setkloading] = useState(false);
    function setInfo(url,add?:string){
        if(url){
            setloading(true)
            axios.get(url).then((res)=>{
                let data = res.data;
                settot(data.total);
                setloading(false)
                setkloading(true)
                if(add){
                    setUinfo([...uinfo,...data.msg])
                }else{
                    setUinfo(data.msg)
                }

            })
        }

    }
   useEffect(()=>{
         if(props.url){
            setkloading(false)
            setpage(1);
            setbaseurl(props.url.split('?')[0])
                setInfo(props.url)
         }
   },[props.url])
   let [page,setpage] = useState(1);
    function jl(time){
        var b = true;
        return function(fn){
            if(b){
                b = false;
                setTimeout(()=>{
                    b = true
                    fn();
                },time)
            }
        }

    }
    let t = jl(300)
    function bindevent(){
        // console.log('c')
        t(function () {
            let top:number = document.documentElement.scrollTop;
            let height:number = document.documentElement.scrollHeight;
            let wh:number = window.innerHeight;
            if(height>0){
                if(top+wh>height-10){
                    console.log(loading)
                    if(!loading){
                        setpage(page+1);
                    }
                }
            }
        })
    }
    useEffect(()=>{
        window.addEventListener('scroll',bindevent,false)
     return function () {
        window.removeEventListener('scroll',bindevent,false)
     }
    })
    React.useEffect(()=>{
      if(page>1){
          if(page*7<tot){
              setInfo(baseurl+'?page='+page+'&pagesize=7','add')
          }
      }
    },[page])
    return (
        <HashRouter>
        <div className="trends animated  bounceInDown" style={{width:'100%'}}>
            <p className="trends_head"><span>{props.title}</span><span></span></p>
            <div className="trends_content">
            <ReactPlaceholder type='media' rows={7} ready={kloading} showLoadingAnimation={true}>
                {uinfo.length>0?uinfo.map((val,index)=>{
                    return (
                       <div className="trends_item" key={index}><Link   to={{pathname:'/home/des',search:`?id=${val.id}&type=${props.title}`}}>
                        <div className={'trends_item_warp'}>
                            <img src={base+val.pjname} alt=""/>
                            <div className={'trends_item_con'}>
                                <div>{val.name}</div>
                                <div>{val.fcon}</div>
                                <div><span><i className="fa fa-eye icon"></i>{val.see}</span> {val.time}</div>
                            </div>
                        </div>
                    </Link></div>
                      )
                }):(<div>博主没有动态!</div>)}
                </ReactPlaceholder>
            </div>
        </div>
        </HashRouter>
  )
}
export default Trends
